<template>
    <div class="echart-chart">
        <div class="inside">
            <header><i class="el-icon-location-outline"></i> 此房源明年房价预测</header>
            <div class="chartBox clearfix">
                <article v-show="!chartNoDataShow">
                    <p ref="instructions"></p>
                    <div class="chart-div" id="thisHouseNextYearForecastPrice-chart" style="height: 296px;"></div>
                </article>
                <h4 ref="thisHouseNextYearForecastPrice_chart_NoData" v-show="chartNoDataShow"></h4>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                houseId: this.$route.query.houseId,
                myEcharts: '',
                chartNoDataShow: false, //判断是否有无数据
                current_price: null,
                forecast_price: null,

            }
        },
        computed: {
        },
        created() {
        },
        mounted() {
            this.myEcharts = echarts.init(document.getElementById('thisHouseNextYearForecastPrice-chart'));
            this.myEcharts.showLoading();
            window.addEventListener('resize', () => {
                this.myEcharts.resize();
            });

            this.get_thisHouseNextYearForecastPrice();
        },
        beforeDestroy () {
            if(this.myEcharts){
                this.myEcharts.dispose();
            }
        },
        methods: {
            //获取此房源明年房价预测数据
            get_thisHouseNextYearForecastPrice() {
                this.$get('/report/currenthomevalueforecast/' + this.houseId).then(res => {
                    if (res.status == 0) {
                        this.chartNoDataShow = false;
                        this.thisHouseNextYearForecastPrice_charts(res.data.current_price, res.data.forecast_price);
                        this.$refs.instructions.innerText = '优房数据预计明年此房源价格为'+ this.$accounting.formatMoney(res.data.forecast_price, "$", 0) +'，相对今年涨幅为'+ this.$accounting.formatMoney(res.data.rise, "", 2) +'%。';
                    } else {
                        this.chartNoDataShow = true;
                        this.$refs.thisHouseNextYearForecastPrice_chart_NoData.innerText = res.msg;
                    }
                });
            },
            //此房源明年房价预测——柱状图
            thisHouseNextYearForecastPrice_charts(thisYeatPrice, nextYearPredictPrice){
                this.myEcharts.hideLoading();
                this.myEcharts.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    // 控制图表摆放位置
                    grid: {
                        left: '15%',
                    },
                    xAxis: {
                        data: ["今年价格", "明年价格"],
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696'
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        //分隔线的相关设置
                        splitLine: {
                            lineStyle:{
                                color: '#f1f1f1'
                            }
                        },
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                            formatter: value => {
                                let KM = '';
                                if(value.toString().length >= 7){
                                    KM = (value/1000000).toFixed(1) +'M'
                                }else{
                                    KM = Math.round(value/1000) +'k'
                                }
                                return '$'+ KM;
                            },
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    series: [{
                        type: 'bar',
                        barWidth: '40',
                        label: {
                            show: true,//柱子上边显示文字标签
                            position: 'top',
                            formatter: param => {
                                return this.$accounting.formatMoney(param.value, "$", 0);
                            },
                            offset: [0, -5],
                            fontSize: 16,
                            color: '#000',
                            fontWeight: 'bold'
                        },
                        data: [
                            {
                                value: Math.round(thisYeatPrice),
                                itemStyle:{//柱子颜色
                                    color:'#40c3f9'
                                }
                            },
                            {
                                value: Math.round(nextYearPredictPrice),
                                itemStyle:{//柱子颜色
                                    color:'#ffbf53'
                                }
                            }
                        ],
                    }],
                    animationEasing: 'elasticOut',
                });
            },
        },
        components: {
        }
    }
</script>

<style scoped lang="less" type="text/less">
</style>
